import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syn_4s/core/extension/int_extension.dart';

import '../shared/app_theme.dart';

class MainTitle extends StatelessWidget {
  final String title;
  final VoidCallback onTap;
  final bool isExpanded;

  const MainTitle({
    super.key,
    required this.title,
    required this.onTap,
    required this.isExpanded,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.symmetric(vertical: 4.px, horizontal: 6.px),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SvgPicture.asset(
            "assets/images/rhombic.svg",
            width: 14.px,
            height: 14.px,
          ),
          SizedBox(
            width: 2.px,
          ),
          buildTitle(),
          const Spacer(),
          buildOval(),
          InkWell(
            onTap: onTap,
            child: Icon(
              isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
              size: 28.px,
              color: const Color.fromRGBO(108, 108, 108, 1),
            ),
          )
        ],
      ),
    );
  }

  Widget buildOval() {
    return Container(
      height: 12.px,
      width: 12.px,
      decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.all(Radius.circular(6.px))),
    );
  }

  Widget buildTitle() {
    return ClipPath(
      clipper: PolygonClipper(),
      child: Container(
        padding:
            EdgeInsets.only(top: 2.px, bottom: 2.px, left: 2.px, right: 12.px),
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [AppTheme.titleStartColor, AppTheme.titleEndColor],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
        ),
        child: Text(
          title,
          style: const TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.w900),
        ),
      ),
    );
  }
}

class PolygonClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, 0); // 左上角
    path.lineTo(size.width, 0); // 右上角
    path.lineTo(size.width - 12, size.height); // 右下角的左侧一点
    path.lineTo(0, size.height); // 左下角
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
